<script setup lang="ts">
// 可选的props，用于自定义样式
interface Props {
  showTitle?: boolean
  title?: string
}

withDefaults(defineProps<Props>(), {
  showTitle: false,
  title: '联系我们'
})
</script>

<template>
  <div class="flex justify-center">
    <div class="bg-white rounded-[20px] px-7 py-5 inline-block">
      
      <div class="flex flex-col md:flex-row gap-6 items-start pl-5">
        <!-- 联系方式 -->
        <div class="flex-1 h-40 flex flex-col justify-between gap-1 md:gap-1 mr-0 md:mr-25">
          <!--
          <div class="flex items-center">
            <img src="/icon/icon_mail.png" class="w-6 h-6" alt="邮箱图标" />
            <div>
              <div class="text-xs text-gray-500 mb-1">公司邮箱</div>
              <div class="text-gray-900 font-medium">476299630@qq.com</div>
            </div>
          </div>
          -->

          <div class="flex flex-col mb-4 md:mb-0">
            <div class="flex items-center gap-2  mb-2">
              <img src="/icon/icon_phone.png" class="w-6 h-6" alt="电话图标" />
              <div class="text-[1.1rem] text-[#6F7580]">联系热线</div>
            </div>
              <a 
                href="tel:15860740037" 
                class="text-[#101828] text-[1.2rem] font-medium cursor-pointer"
              >
                15860740037 (刘先生)
              </a>
          </div>

          <div class="flex flex-col">
            <div class="flex items-center gap-2 mb-2">
              <img src="/icon/icon_mail.png" class="w-6 h-6" alt="邮箱图标" />
              <div class="text-[1.1rem] text-[#6F7580]">公司邮箱</div>
            </div>
              <a 
                href="mailto:476299630@qq.com" 
                class="text-[#101828] text-[1.2rem] font-medium cursor-pointer"
              >
                476299630@qq.com
              </a>
          </div>



        </div>

        <!-- 二维码 -->
        <div class="flex-shrink-0 mx-auto md:mx-0">
          <div class="w-45 h-45 bg-white rounded-xl flex items-center justify-center border-gray-200">
            <img
              class="w-full h-full object-contain"
              src="/wx.png"
              alt="微信二维码"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

